<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    modelValue: { type: Number, required: true },
    strokeWidth: { type: String, default: "8rpx" },
    backgroundColor: { type: String, default: "#f3eae2" },
    activeColor: { type: String, default: "#ff7900" },
  },
});
</script>

<template>
  <view class="progress" :style="{ height: strokeWidth, backgroundColor }">
    <view
      class="progress-line"
      :style="{ width: `${modelValue}%`, backgroundColor: activeColor }"
    ></view>
  </view>
</template>

<style lang="scss">
.progress {
  position: relative;
  width: 100%;
  border-radius: 4rpx;

  .progress-line {
    height: 100%;
    border-radius: 4rpx;
  }
}
</style>